 <template>
	<view>
		<dcp-scroller :isLoading="isLoading" @refresh="refresh">
		<view class="page_height_box">
		<view class="top_nav_box">
			<navigation-custom :config="config" @customConduct="customConduct" />
		</view>
		<view class="page_item_bj"></view>
		<view class="page_content_box">
			<view :style="{height:statusHeight+'px'}"></view>
			<view class="bond_top_box" v-if="info!=null">
				<view class="bond_top_box_left">
					<view class="bond_top_box_left_name">外卖保证金/元</view>
					<view class="bond_top_box_left_price"> {{info.deposit | unitConverter}}</view>
					<view class="bond_top_box_left_tip" v-if="info.deposit < info.deposit_reminder">保证金不足，请及时缴纳</view>
				</view>
				<view class="bond_top_box_right" hover-class="hover_class" @click="goBond()">缴纳保证金</view>
			</view>
			<view class="bond_top_box" v-if="userInfo" style="margin-top: 20rpx;">
				<view class="bond_top_box_left">
					<view class="bond_top_box_left_name">帮买帮送保证金/元</view>
					<view class="bond_top_box_left_price"> {{userInfo.deposit2}}</view>
					<view class="bond_top_box_left_tip" v-if="userInfo.deposit2 < info.deposit_reminder">保证金不足，请及时缴纳</view>
				</view>
				<view class="bond_top_box_right" hover-class="hover_class" @click="goBond()">缴纳保证金</view>
			</view>
			<view class="bond_content_box">
				<view class="bond_content_top_box" >
					<view class="bond_content_top_name">保证金明细</view>
					<view class="bond_content_top_rule" @click="goRule()"><image src="https://www.cccshansong.com/chong_weapp/bond_rule_icon.png" mode=""></image>扣除规则	</view>
				</view>
				<view class="" v-for="(data,index) in list" :key="index">
					<view class="bond_content_item_box" v-if="data.order==null">
						<view class="bond_content_item_top_box">
							<view class="bond_content_item_top_left">{{data.titile}}</view>
						</view>
						<view class="bond_content_item_charge_box">
							<view class="bond_content_item_charge_left">
								<view class="bond_content_item_charge_no">订单号：{{data.order_sn?data.order_sn:'--'}}</view>
								<view class="bond_content_item_charge_time">{{data.created_at}}</view>
							</view>
							<view class="bond_content_item_charge_right">
								<view class="bond_content_item_charge_right_name">金额</view>
								<view class="bond_content_item_charge_right_price"><text v-if="data.addsub=='add'">+</text> <text v-if="data.addsub!='add'">-</text> ¥{{data.number}}</view>
							</view>
						</view>
					</view>
					<view class="bond_content_item_box" v-if="data.order!=null">
						<view class="bond_content_item_top_box">
							<view class="bond_content_item_top_left">{{data.titile}}</view>
							<view class="bond_content_item_top_right">
								<view class="bond_content_item_top_right_price">
									<text v-if="data.addsub!='add'">扣款</text> <text>{{data.number}}</text>元
								</view>
								<view class="bond_content_item_top_right_btn" hover-class="hover_class" @click="goAppeal(data.order.order_no)" v-if="data.refund==null">我要申诉</view>
							</view>
						</view>
						<view class="bond_content_item_order_box">
							<view class="bond_content_item_order_qu">
								<view class="bond_content_item_order_qu_dian"></view>
								<view class="bond_content_item_order_qu_text">{{data.order.sender_address}}</view>
							</view>
							<view class="bond_content_item_order_song">
								<view class="bond_content_item_order_song_dian"></view>
								<view class="bond_content_item_order_song_text">{{data.order.receiver_address}}</view>
							</view>
							<view class="bond_content_item_charge_time">{{data.created_at}}</view>
						</view>

					</view>


				</view>

				<view class="page_tip" v-if="list.length>0">我是有底线的~</view>
				<view class="null_box" v-if="list.length==0" style="padding-top: 80rpx;" >
					<image src="../../static/images/png04.png" mode="" mode="widthFix"></image>
					<view class="null_tip">这里空空如也~</view>
				</view>
				<view  style="height:180rpx;"></view>
			</view>
		</view>
		</view>
		</dcp-scroller>
	</view>
</template>

<script>
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
	export default {
		components: {
			navigationCustom,
		},
		data() {
			return {
				isLoading:false,
				count:0,
				list:[],
				page:1,
				info: null,
				statusHeight: 0,
				config: {
					title: "我的保证金", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#fff", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "../../static/icon/back2.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", //当type为3或4的时候icon右边的文字
				},
				userInfo:''
			};
		},
		onLoad() {
			var a = this
			a.statusHeight = uni.getSystemInfoSync().statusBarHeight  + 48
		},
		onShow() {
			var a = this
			a.page = 1
			a.list = []
			a.getList()
			this.getInfo();
		},
		onPageScroll(res) {
			var a = this
			if (0 < res.scrollTop <= 60) {
				a.config.bgcolor = 'rgba(65, 138, 255,0)'
			}
			if (40 < res.scrollTop <= 120) {
				a.config.bgcolor = 'rgba(65, 138, 255,0.2)'
			}
			if (60 < res.scrollTop <= 220) {
				a.config.bgcolor = 'rgba(65, 138, 255,0.4 )'
			}
			if (res.scrollTop > 220) {
				a.config.bgcolor = 'rgba(65, 138, 255,1)'
			}
			if (res.scrollTop == 0) {
				a.config.bgcolor = 'rgba(65, 138, 255,0)'
			}
		},
		onPullDownRefresh(){
			var a = this
			a.list = []
			a.page = 1
			a.getList()
		},
		onReachBottom(){
			var a = this
			console.log('触底了')
			if(a.count >a.list.length){
				console.log(a.list.length)
				a.page++;
				a.getList()
			}
		},
		methods: {
			getInfo(){
				this.globalajax('user/info',{},'GET',res => {
					this.userInfo = res.data.data.info;
					console.log(this.userInfo);
				})
			},
			refresh(){
				var a = this
				a.isLoading = true;
				setTimeout(()=>{
					a.list = []
					a.page = 1
					a.getList()
				},200)
			},
			getList() {
				var a = this
				uni.showLoading({
					title:'加载中'
				})
				a.globalajax('wallet/list', {
					page:a.page,
					per_page:10,
					type:2
				}, 'GET', function(res) {
					console.log(res);
					a.isLoading = false
					uni.hideLoading()
					uni.stopPullDownRefresh()
					if (res.data.code == 200) {
						a.list = a.list.concat(res.data.data.list.list)
						a.count = res.data.data.list.total
						var temp_obj = res.data.data
						temp_obj.deposit = res.data.data.deposit*1
						temp_obj.deposit_reminder = res.data.data.deposit_reminder*1
						a.info = temp_obj
						console.log(a.info)
					} else {
						a.$showModal({
							title:'友情提示',
							content:res.data.msg,
							showCancel:false,
							confirmText:'我知道了',
							success: (res) => {
							}
						});
					}
				});
			},
			customConduct() {
				uni.navigateBack({
					delta: 1
				})
			},
			goAppeal(order_sn){
				uni.navigateTo({
					url:'/pages/user/appealApply?order_id=' + order_sn
				})
			},
			goBond(){
				// uni.showToast({
				// 	title:'请去小程序端操作',
				// 	icon:'none'
				// })
				// uni.navigateTo({
				// 	url:'/pages/user/payBond?price=' + this.info.deposit
				// })
				plus.share.getServices(res => {
					console.log(JSON.stringify(res));
					var sweixin = res.find(i => i.id === 'weixin')
					if (sweixin) {
						// 分享跳转到微信小程序
						sweixin.launchMiniProgram({
							id: "gh_088fa16acaff", // 	关联微信小程序的原始ID（"g_"开头的字符串）
							path: '/pages/user/userBond', //要打开小程序的路径
							type: 2 // 	微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
						}, res => {
							console.log('成功唤起微信小程序');
						}, err => {
							console.log('失败');
						})
					} else {
						// 没有获取到微信分享服务
					}
				}, err => {
					// 获取分享服务列表失败
				});
			},
			goRule(){
				uni.navigateTo({
					url:'/pages/user/articleDetail?id=3'
				})
			},
		}
	}
</script>

<style lang="scss">
page {
		background-color: #f5f6f8;
	}

	.top_nav_box {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}

	.page_item_bj {
		width: 750rpx;
		height:664rpx;
		background-image: url('../../static/images/png03.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.page_content_box {
		width: 750rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		.bond_content_box{
			.bond_content_item_box{
				width: 702rpx;
				min-height: 198rpx;
				margin: 0 auto;
				background-color: #fff;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				.bond_content_item_order_box{
					margin-top: 16rpx;
					padding-bottom: 20rpx;
					.bond_content_item_charge_time{
							color: rgba(144, 147, 153, 1);
							font-size: 24rpx;
							margin-top: 6rpx;
							margin-left: 24rpx;
						}
					.bond_content_item_order_qu{
						display: flex;
						align-items: center;
						.bond_content_item_order_qu_dian{
							width: 12rpx;
							height: 12rpx;
							background-color: #418AFF;
							border-radius: 50%;
							margin-left: 24rpx;
							margin-right: 14rpx;
						}
						.bond_content_item_order_qu_text{
							width: 540rpx;
							white-space: nowrap;
						    text-overflow: ellipsis;
						    overflow: hidden;
						    word-break: break-all;
							color: rgba(96, 98, 102, 1);
							font-size: 28rpx;
						}
					}

					.bond_content_item_order_song{
						display: flex;
						align-items: center;
						padding-top: 10rpx;
						.bond_content_item_order_song_dian{
							width: 12rpx;
							height: 12rpx;
							background-color: rgba(3, 214, 214, 1);
							border-radius: 50%;
							margin-left: 24rpx;
							margin-right: 14rpx;
						}
						.bond_content_item_order_song_text{
							width: 540rpx;
							white-space: nowrap;
						    text-overflow: ellipsis;
						    overflow: hidden;
						    word-break: break-all;
							color: rgba(96, 98, 102, 1);
							font-size: 28rpx;
						}
					}
				}
				.bond_content_item_charge_box{
					display: flex;
					justify-content: space-between;
					margin-top: 16rpx;
					.bond_content_item_charge_right{
						margin-right: 24rpx;
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						.bond_content_item_charge_right_name{
							color: rgba(48, 49, 51, 1);
							font-size: 24rpx;
						}
						.bond_content_item_charge_right_price{
							font-weight: bold;
							color: #418AFF;
							font-size: 32rpx;
							margin-top: 6rpx;
						}
					}
					.bond_content_item_charge_left{
						margin-left: 24rpx;
						.bond_content_item_charge_no{
							color: rgba(144, 147, 153, 1);
							font-size: 24rpx;
						}
						.bond_content_item_charge_time{
							color: rgba(144, 147, 153, 1);
							font-size: 24rpx;
							margin-top: 6rpx;
						}
					}
				}
				.bond_content_item_top_box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-top: 24rpx;
					.bond_content_item_top_left{
						margin-left: 24rpx;
						color: rgba(48, 49, 51, 1);
						font-size: 28rpx;
						height: 56rpx;
						line-height: 56rpx;
						font-weight: bold;
						width: 300rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						word-break: break-all;
					}
					.bond_content_item_top_right{
						display: flex;
						align-items: center;
						margin-right: 24rpx;
						.bond_content_item_top_right_btn{
							width: 160rpx;
							height: 56rpx;
							text-align: center;
							line-height: 56rpx;
							background-color: #418AFF;
							color: #fff;
							font-size: 28rpx;
							margin-left: 44rpx;
							border-radius: 8rpx;
						}
						.bond_content_item_top_right_price{
							color: rgba(48, 49, 51, 1);
							font-size: 28rpx;
							font-weight: bold;
							text{
								color: #418AFF;
							}
						}
					}
				}

			}
			.bond_content_top_box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 40rpx;
				padding-bottom: 24rpx;
				.bond_content_top_name{
					color: rgba(36, 40, 49, 1);
					font-weight: bold;
					font-size: 32rpx;
					margin-left: 24rpx;
				}
				.bond_content_top_rule{
					display: flex;
					align-items: center;
					margin-right: 24rpx;
					color: rgba(48, 49, 51, 1);
					font-size: 28rpx;
					font-weight: bold;
					image{
						width: 36rpx;
						height: 36rpx;
						margin-right: 6rpx;
					}
				}
			}
		}
		.bond_top_box{
			width: 702rpx;
			height: 200rpx;
			margin: 0 auto;
			border-radius: 16rpx;
			background: rgba(255,255,255,0.5);
			/*background-image: url('https://www.cccshansong.com/chong_weapp/bond_top_bj.png');*/
			/*background-size: 100% 100%;*/
			/*background-repeat: no-repeat;*/
			display: flex;
			align-items: center;
			justify-content: space-between;
			.bond_top_box_left{
				margin-left: 32rpx;
				.bond_top_box_left_name{
					color: rgba(48, 49, 51, 1);
					font-size: 26rpx;
				}
				.bond_top_box_left_price{
					color: #418AFF;
					font-weight: bold;
					font-size: 52rpx
				}
				.bond_top_box_left_tip{
					color: #418AFF;
					font-size: 24rpx;
				}
			}
			.bond_top_box_right{
				width: 196rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				background-color: #418AFF;
				border-radius: 60rpx;
				color: #fff;
				font-size: 28rpx;
				margin-right: 32rpx;
			}
		}
	}
</style>
